<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游戏类别</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
        }
        .sidebar {
            width: 200px;
            background-color: #f5f5f5;
            padding: 20px;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
        }
        .sidebar h2 {
            font-size: 20px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px; /* 箭头与文字间距 */
            cursor: pointer; /* 提示可点击 */
        }
        .back-arrow {
            font-size: 18px; /* 箭头大小 */
        }
        .sidebar ul {
            list-style: none;
        }
        .sidebar li a {
            display: block;
            padding: 10px 0;
            color: #333;
            text-decoration: none;
            font-size: 16px;
        }
        .sidebar li a.active {
            color: #00a8ff;
            font-weight: bold;
        }
        .main {
            margin-left: 200px;
            padding: 20px;
        }
        .header {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-bottom: 20px;
        }
        .header .search-icon, .header .more-icon {
            font-size: 24px;
            margin-left: 20px;
            cursor: pointer;
        }
        .game-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        .game-item {
            display: flex;
            align-items: flex-start;
        }
        .game-img-container {
            position: relative;
            width: 100px;
            height: 100px;
            margin-right: 12px;
        }
        .game-item img {
            width: 100px;
            height: 100px;
            background-color: #333; /* 模拟游戏图标背景 */
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        .game-item img:hover {
            transform: scale(1.05);
        }
        .game-info h3 {
            font-size: 16px;
            margin-bottom: 4px;
        }
        .game-info p {
            font-size: 14px;
            color: #666;
            margin-bottom: 4px;
        }
        .game-info .rating {
            color: #ffc107;
        }
        .game-info .tags {
            font-size: 13px;
            color: #999;
        }

        /* 游戏详情卡片样式 */
        .game-details {
            position: absolute;
            left: 110px;
            top: 0;
            width: 300px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            padding: 15px;
            z-index: 10;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease;
            border: 1px solid #eee;
        }
        .game-img-container:hover .game-details {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .game-details h4 {
            font-size: 16px;
            margin-bottom: 10px;
            color: #333;
        }
        .game-details .detail-desc {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
            margin-bottom: 10px;
        }
        .game-details .detail-features {
            font-size: 13px;
            color: #888;
        }
        .game-details .detail-features span {
            display: inline-block;
            background-color: #f5f5f5;
            padding: 3px 8px;
            border-radius: 4px;
            margin-right: 5px;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
<div class="sidebar">
    <!-- 箭头 -->
    <h2>
        <span class="back-arrow">←</span>
        游戏类别
    </h2>
    <ul>
        <li><a href="#" class="active">星标游戏</a></li>
        <li><a href="#">休闲益智</a></li>
        <li><a href="#">跑酷竞速</a></li>
        <li><a href="#">动作冒险</a></li>
        <li><a href="#">绝美音游</a></li>
        <li><a href="#">模拟系列</a></li>
        <li><a href="#">冒险解密</a></li>
        <li><a href="#">卡牌游戏</a></li>
        <li><a href="#">塔防游戏</a></li>
    </ul>
</div>
<!-- 搜索图标 -->
<div class="main">
    <div class="header">
        <span class="search-icon">🔍</span>
        <span class="more-icon">⋮</span>
    </div>
    <div class="game-grid">
        <div class="game-item">
            <div class="game-img-container">
                <img src="燕云十六声.jpg">
                <div class="game-details">
                    <h4>燕云十六声</h4>
                    <p class="detail-desc">《燕云十六声》是网易旗下一款开放世界武侠游戏，以北宋时期为背景，打造了一个宏大的武侠江湖。玩家可以自由探索广阔的游戏世界，体验丰富的武侠招式和剧情。</p>
                    <div class="detail-features">
                        <span>开放世界</span>
                        <span>武侠</span>
                        <span>角色扮演</span>
                        <span>动作</span>
                    </div>
                </div>
            </div>
            <div class="game-info">
                <h3>燕云十六声</h3>
                <p>天生武侠，世界无羁</p>
                <p class="rating">★★★★★</p>
                <p class="tags">网易游戏 角色扮演</p>
            </div>
        </div>
        <div class="game-item">
            <div class="game-img-container">
                <img src="无畏契约.jpg">
                <div class="game-details">
                    <h4>无畏契约</h4>
                    <p class="detail-desc">《无畏契约》是一款5v5战术射击游戏，结合了精确的射击机制和独特的英雄技能。玩家需要团队协作，利用不同角色的技能组合来取得胜利。</p>
                    <div class="detail-features">
                        <span>战术射击</span>
                        <span>团队合作</span>
                        <span>多人在线</span>
                    </div>
                </div>
            </div>
            <div class="game-info">
                <h3>无畏契约</h3>
                <p>全新潮流英雄射击力作</p>
                <p class="rating">★★★★★</p>
                <p class="tags">战术射击 热血交锋</p>
            </div>
        </div>
        <div class="game-item">
            <div class="game-img-container">
                <img src="英雄联盟.jpg">
                <div class="game-details">
                    <h4>英雄联盟</h4>
                    <p class="detail-desc">《英雄联盟》是一款多人在线战斗竞技游戏(MOBA)，玩家控制具有独特能力的英雄，与队友协作摧毁对方基地。游戏拥有丰富的英雄池和战略深度。</p>
                    <div class="detail-features">
                        <span>MOBA</span>
                        <span>团队竞技</span>
                        <span>策略</span>
                    </div>
                </div>
            </div>
            <div class="game-info">
                <h3>英雄联盟</h3>
                <p>团队协作 策略至上</p>
                <p class="rating">★★★★★</p>
                <p class="tags">英雄竞技，热血开团</p>
            </div>
        </div>
        <div class="game-item">
            <div class="game-img-container">
                <img src="三角洲行动.jpg">
                <div class="game-details">
                    <h4>三角洲行动</h4>
                    <p class="detail-desc">《三角洲行动》是一款现代军事题材射击游戏，融合了多种玩法模式，包括团队对战、载具作战和开放世界探索，带来沉浸式的枪战体验。</p>
                    <div class="detail-features">
                        <span>军事射击</span>
                        <span>载具作战</span>
                        <span>开放世界</span>
                    </div>
                </div>
            </div>
            <div class="game-info">
                <h3>三角洲行动</h3>
                <p>多元玩法 火力全开</p>
                <p class="rating">★★★★★</p>
                <p class="tags">载具激战 热血枪战</p>
            </div>
        </div>
        <div class="game-item">
            <div class="game-img-container">
                <img src="穿越火线.jpg">
                <div class="game-details">
                    <h4>穿越火线</h4>
                    <p class="detail-desc">《穿越火线》是一款经典的第一人称射击游戏，拥有丰富的游戏模式和地图，支持多人在线对战，以快节奏的枪战体验深受玩家喜爱。</p>
                    <div class="detail-features">
                        <span>FPS</span>
                        <span>竞技</span>
                        <span>团队对战</span>
                    </div>
                </div>
            </div>
            <div class="game-info">
                <h3>穿越火线</h3>
                <p>热血枪战 火线对决</p>
                <p class="rating">★★★★★</p>
                <p class="tags">穿越火线 激情无限</p>
            </div>
        </div>
        <div class="game-item">
            <div class="game-img-container">
                <img src="永劫无间.jpg">
                <div class="game-details">
                    <h4>永劫无间</h4>
                    <p class="detail-desc">《永劫无间》是一款武侠风格的动作竞技游戏，融合了 melee 战斗和射击元素，玩家可以使用飞索快速移动，体验畅快淋漓的武侠对决。</p>
                    <div class="detail-features">
                        <span>武侠</span>
                        <span>动作竞技</span>
                        <span>大逃杀</span>
                    </div>
                </div>
            </div>
            <div class="game-info">
                <h3>永劫无间</h3>
                <p>武侠竞技，畅爽体验</p>
                <p class="rating">★★★★★</p>
                <p class="tags">飞索纵横，武侠吃鸡</p>
            </div>
        </div>
        <div class="game-item">
            <div class="game-img-container">
                <img src="原神.jpg">
                <div class="game-details">
                    <h4>原神</h4>
                    <p class="detail-desc">《原神》是一款开放世界动作角色扮演游戏，玩家可以探索广阔的提瓦特大陆，收集角色，利用元素反应进行战斗，体验丰富的剧情故事。</p>
                    <div class="detail-features">
                        <span>开放世界</span>
                        <span>二次元</span>
                        <span>动作RPG</span>
                        <span>元素反应</span>
                    </div>
                </div>
            </div>
            <div class="game-info">
                <h3>原神</h3>
                <p>奇幻冒险，即刻启程</p>
                <p class="rating">★★★★★</p>
                <p class="tags">元素交织，策略战斗</p>
            </div>
        </div>
        <div class="game-item">
            <div class="game-img-container">
                <img src="地下城与勇士.webp">
                <div class="game-details">
                    <h4>地下城与勇士</h4>
                    <p class="detail-desc">《地下城与勇士》是一款经典横版格斗游戏，拥有丰富的职业体系和多样的副本，以爽快的连击和技能特效著称，长期保持高人气。</p>
                    <div class="detail-features">
                        <span>横版格斗</span>
                        <span>角色扮演</span>
                        <span>副本</span>
                    </div>
                </div>
            </div>
            <div class="game-info">
                <h3>地下城与勇士</h3>
                <p>连击爽战，热血永燃</p>
                <p class="rating">★★★★★</p>
                <p class="tags">横版格斗，经典不朽</p>
            </div>
        </div>
        <div class="game-item">
            <div class="game-img-container">
                <img src="CSGO.png">
                <div class="game-details">
                    <h4>CSGO</h4>
                    <p class="detail-desc">《反恐精英：全球攻势》是一款经典的战术射击游戏，分为反恐精英和恐怖分子两个阵营，注重团队配合和战术策略。</p>
                    <div class="detail-features">
                        <span>战术射击</span>
                        <span>竞技</span>
                        <span>团队合作</span>
                    </div>
                </div>
            </div>
            <div class="game-info">
                <h3>CSGO</h3>
                <p>枪火竞技，策略至上</p>
                <p class="rating">★★★★★</p>
                <p class="tags">多样模式，竞技激情</p>
            </div>
        </div>
        <div class="game-item">
            <div class="game-img-container">
                <img src="QQ飞车.webp">
                <div class="game-details">
                    <h4>QQ飞车</h4>
                    <p class="detail-desc">《QQ飞车》是一款卡通风格的竞速游戏，拥有丰富的赛车和赛道，强调漂移技巧和道具对抗，带来轻松愉快的竞速体验。</p>
                    <div class="detail-features">
                        <span>竞速</span>
                        <span>漂移</span>
                        <span>道具赛</span>
                    </div>
                </div>
            </div>
            <div class="game-info">
                <h3>QQ飞车</h3>
                <p>极速漂移，畅享激情</p>
                <p class="rating">★★★★★</p>
                <p class="tags">经典竞速，热血飙车</p>
            </div>
        </div>
        <div class="game-item">
            <div class="game-img-container">
                <img src="鸣潮.webp">
                <div class="game-details">
                    <h4>鸣潮</h4>
                    <p class="detail-desc">《鸣潮》是一款二次元风格的动作RPG游戏，拥有独特的音旋战斗系统，玩家可以操控不同特性的共鸣者，在充满未知的世界中探索并揭开鸣潮现象的秘密。</p>
                    <div class="detail-features">
                        <span>动作RPG</span>
                        <span>二次元</span>
                        <span>音旋战斗</span>
                    </div>
                </div>
            </div>
            <div class="game-info">
                <h3>鸣潮</h3>
                <p>音旋共鸣，潮起之战</p>
                <p class="rating">★★★★☆</p>
                <p class="tags">二次元 动作战斗</p>
            </div>
        </div>
        <div class="game-item">
            <div class="game-img-container">
                <img src="逆战.webp">
                <div class="game-details">
                    <h4>逆战</h4>
                    <p class="detail-desc">《逆战》是一款未来科技题材的FPS游戏，融合了机甲作战、僵尸模式和团队竞技等多种玩法，玩家将加入"守卫者"或"突击者"阵营展开激烈对抗。</p>
                    <div class="detail-features">
                        <span>FPS</span>
                        <span>科幻</span>
                        <span>机甲战斗</span>
                    </div>
                </div>
            </div>
            <div class="game-info">
                <h3>逆战</h3>
                <p>未来战场，机甲对决</p>
                <p class="rating">★★★★☆</p>
                <p class="tags">科幻射击 多元模式</p>
            </div>
        </div>
        <div class="game-item">
            <div class="game-img-container">
                <img src="梦幻西游.webp">
                <div class="game-details">
                    <h4>梦幻西游</h4>
                    <p class="detail-desc">《梦幻西游》是一款经典的回合制角色扮演游戏，以中国古典神话为背景，拥有丰富的角色养成系统、社交玩法和剧情任务，营造了一个绚丽多彩的仙侠世界。</p>
                    <div class="detail-features">
                        <span>回合制</span>
                        <span>MMORPG</span>
                        <span>仙侠</span>
                    </div>
                </div>
            </div>
            <div class="game-info">
                <h3>梦幻西游</h3>
                <p>经典回合，仙侠奇缘</p>
                <p class="rating">★★★★★</p>
                <p class="tags">回合制RPG 经典IP</p>
            </div>
        </div>
        <div class="game-item">
            <div class="game-img-container">
                <img src="守望先锋.webp">
                <div class="game-details">
                    <h4>守望先锋</h4>
                    <p class="detail-desc">《守望先锋》是一款团队射击游戏，拥有多样化的英雄角色，每个英雄都有独特的技能和定位，玩家需要团队协作完成攻防目标，体验快节奏的战斗乐趣。</p>
                    <div class="detail-features">
                        <span>英雄射击</span>
                        <span>团队合作</span>
                        <span>攻防战</span>
                    </div>
                </div>
            </div>
            <div class="game-info">
                <h3>守望先锋</h3>
                <p>英雄集结，攻防对决</p>
                <p class="rating">★★★★★</p>
                <p class="tags">团队射击 角色技能</p>
            </div>
        </div>
    </div>
</div>
<script>
    const links = document.querySelectorAll('.sidebar li a');
    links.forEach(link => {
        link.addEventListener('click', function() {
            links.forEach(l => l.classList.remove('active'));
            this.classList.add('active');
        });
    });
    // 返回上一页
    document.querySelector('.back-arrow').parentElement.addEventListener('click', function() {
        window.history.back();
    });
</script>
</body>
</html>